<script setup>
const props = defineProps({
	ntooth: Number,
	itooth: Object,
})

const emit = defineEmits(["tooth"]);

function emitTooth() {
	console.log("tooth", props.itooth)
	if (props.itooth === undefined) {
		return
	}
	emit('tooth', props.itooth)
}

</script>
<template>
	<div @click="emitTooth">
		<div :class="itooth.length > 0 ? 'flex flex-col tooth' : 'flex flex-col toothd'">
			<div>
				{{ ntooth }}
			</div>
			<div v-if="itooth.length > 0">
				{{ itooth[itooth.length - 1].ImageDate }}
				{{ itooth.ImageDate }}
			</div>
		</div>
		<!-- <UButton :label="scheme."></UButton> -->
	</div>
</template>


<style>
.tooth {
	display: inline-block;
	box-sizing: border-box;
	padding: 0 24px;
	margin: 0 15px 15px 0;
	outline: none;
	border: none;
	border-radius: 3px;
	height: 80px;
	width: 130px;
	line-height: 37px;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	color: #ffffff;
	text-shadow: 0px 7px 7px rgba(0, 0, 0, 0.8);
	background-color: #05cd51;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
	transition: box-shadow 0.18s ease-out, background 0.18s ease-out,
		color 0.18s ease-out;
}

.tooth:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}

.tooth:hover {
	box-shadow: 0 1px 1px 0 #cfcfcf, 0 2px 5px 0 #cfcfcf;
}

.tooth:active {
	background-color: #058c38 !important;
}

.tooth:disabled {
	background-color: #aed2bc;
	color: #444;
	pointer-events: none;
}

.toothd {
	display: inline-block;
	box-sizing: border-box;
	padding: 0 24px;
	margin: 0 15px 15px 0;
	outline: none;
	border: none;
	border-radius: 3px;
	height: 80px;
	width: 130px;
	line-height: 37px;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	text-shadow: 0px 7px 7px rgba(0, 0, 0, 0.8);
	background-color: #03030369;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
	transition: box-shadow 0.18s ease-out, background 0.18s ease-out,
		color 0.18s ease-out;
}

.toothd:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}

.toothd:hover {
	box-shadow: 0 1px 1px 0 #cfcfcf, 0 2px 5px 0 #cfcfcf;
}

.toothd:active {
	background-color: #d8deda !important;
}

.toothd:disabled {
	background-color: #aed2bc;
	color: #444;
	pointer-events: none;
}
</style>